<template>
  <div>
    <Box>
      <div slot="box">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="当事人">
            <a-descriptions title="" :column="3">
              <a-descriptions-item label="证件代码">
                {{ party.documentType }}
                {{ filterMultiDictText('document_type',party.documentType) }}
              </a-descriptions-item>
              <a-descriptions-item label="民族">
                {{ filterMultiDictText('nation',party.nation) }}
              </a-descriptions-item>
              <a-descriptions-item label="居住详址">
                {{ party.detailedResidentialAddress }}
              </a-descriptions-item>
              <a-descriptions-item label="证件号码">
                {{ party.identificationNumber }}
              </a-descriptions-item>
              <a-descriptions-item label="学历" :span="2">
                {{ filterMultiDictText('education',party.education) }}
              </a-descriptions-item>
              <a-descriptions-item label="性别">
                {{ filterMultiDictText('sex',party.sex) }}
              </a-descriptions-item>
              <a-descriptions-item label="人员类别" :span="2">
                {{ filterMultiDictText('personnel_category',party.personnelCategory) }}
              </a-descriptions-item>
            </a-descriptions>
          </a-tab-pane>
          <a-tab-pane key="2" tab="化解信息" force-render>
            <div style="width: 100%; display: flex;justify-content: flex-end; margin-bottom: 5px" v-if="bj">
              <a-button @click="huajie">添加化解信息</a-button>
            </div>
            <CustomTable
              ref="table"
              :showAlert="false"
              :columns="columns"
              :dataSource="resolution"
              :showSelection="false"
              :showPagination="true"
              :customRow="clickCustomRow"
              rowKey="id"
              :loading="loading"
              @change="onTableChange"
            >
              <template slot="defuseSuccess" slot-scope="text, record">
                <span>{{ text === '0' ? '否' : '是' }}</span>
              </template>
              <template slot="state" slot-scope="text, record">
                <div v-if="bj">
                  <a href="javascript:;" @click="deleteList(record)" >删除</a>&emsp;
                  <a href="javascript:; " @click="textList(record)">编辑</a>
                </div>
                <div v-else>
                  <a href="javascript:;" @click="textListView(record)" >填写考评意见</a>
                </div>
              </template>
            </CustomTable>
          </a-tab-pane>
        </a-tabs>
      </div>
    </Box>
    <div>
      <a-modal v-model="visible" title="考评" @ok="handleOk" width="600px" centered>
        <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
        >
          <a-form-model-item label="考评意见" prop="evaluationOpinions">
            <a-input v-model="form.evaluationOpinions" type="textarea" placeholder="请输入至少五个字符"/>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import Box from '@views/xlgc/Box'
import CustomTable from '@/components/zxd/Table/CustomTable'
import { getDictItemsFromCache } from '@api/api'
import {editResolveInformation, evaluation, postHjdelete, updataHJ} from '@api/xlgc/lawCase'
export default {
  name: 'ListMa',
  components: { Box, CustomTable },
  props: {
    id: Number,
    party: Object,
    resolution: Array,
    bj:Boolean
  },
  data() {
    return {
      form:{
        evaluationOpinions:undefined,
        id:undefined
      },
      visible:false,
      rules: {
        evaluationOpinions: [
          { required: true, message: '该项不能为空', trigger: 'blur' },
          { min: 5, message: '请输入至少五个字符', trigger: 'blur' }
        ]
      },
      Midata: {},
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10000
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` // 序号分页后连续
        },
        // {
        //   title: '案件编号',
        //   dataIndex: 'caseCode',
        //   scopedSlots: { customRender: 'caseCode' }
        // },
        {
          title: '化解组织',
          dataIndex: 'defuseOrganization',
          scopedSlots: { customRender: 'defuseOrganization' }
        },
        {
          title: '化解责任人姓名',
          dataIndex: 'personLiable',
          scopedSlots: { customRender: 'personLiable' }
        },
        {
          title: '化解责任人联系方式',
          dataIndex: 'contactInformation',
          scopedSlots: { customRender: 'contactInformation' }
        },
        {
          title: '化解时限',
          dataIndex: 'defuseDate',
          scopedSlots: { customRender: 'defuseDate' }
        },
        {
          title: '是否化解成功',
          dataIndex: 'defuseSuccess',
          scopedSlots: { customRender: 'defuseSuccess' }
        },
        {
          title: '化解情况',
          dataIndex: 'defuseSituation',
          scopedSlots: { customRender: 'defuseSituation' }
        },
        {
          title: '化解时间',
          dataIndex: 'resolutionTime',
          scopedSlots: { customRender: 'resolutionTime' }
        },
        {
          title: '考评日期',
          dataIndex: 'evaluationDate',
          scopedSlots: { customRender: 'evaluationDate' }
        },
        {
          title: '考评意见',
          dataIndex: 'evaluationOpinions',
          scopedSlots: { customRender: 'evaluationOpinions' }
        },
        {
          title: '操作',
          width: 90,
          align: 'center',
          dataIndex: 'state',
          scopedSlots: { customRender: 'state' }
        }
      ],
      pageData: {}
    }
  },
  mounted()  {
    console.log(this.resolution);
  },
  methods: {
    textListView(val){
      console.log(val)
      this.form.id = val.id
      this.visible = true
    },
    handleOk(){
      this.$refs.ruleForm.validate(valid => {
        if(valid){
          evaluation(this.form).then(src => {
            if(src.success){
              this.$message.success('填写成功', 2)
              this.visible = false
            } else {
              this.$message.error('添加失败，请仔细核对后再次添加')
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.$message.error('添加失败，请仔细核对后再次添加')
        }
      })
    },
    deleteList(val) {
      postHjdelete(val.id)
        .then(res => {
          console.log(res)
          this.$emit('huajie', true)
          // if(res.message == '添加成功'){
          //   this.$message.success(res.message, 2,);
          // }else{
          //   this.$message.error('添加失败，请仔细核对后再次添加');
          // }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    textList(val) {
      console.log(val)
      this.$router.push({
        path: '/contradiction/uploadHJ',
        query: {
          text: false,
          id: this.id,
          item: val
        }
      })
    },
    huajie() {
      this.$router.push({
        path: '/contradiction/uploadHJ',
        query: {
          text: true,
          id: this.id
        }
      })
    },
    callback(key) {
      console.log(key)
    },
    clickCustomRow(record, index) {
      var _this = this
      return {
        on: {
          // 事件
          click: () => {

          }
        }
      }
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode, text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    }
  }
}
</script>

<style scoped>

</style>
